import React from 'react'
import Action from '../../action/action'
import Store from '../../store/store'
import ReactMixin from 'react-mixin'
import Reflux from 'reflux'

import './adList.less'


export default class AdList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            adList : [],
        }
    }


    componentDidMount(){
        Action.getAdList()
    }
    render(){
        let list = [];
        this.state.adList.map((item,i) => {
            list.push(
                <TYPE key={i}  item={item}/>
            )
        });
        return(
            <div className="adList">
                {list}
            </div>
        )
    }
}

class TYPE extends React.Component{
    render(){
        let LIST;
        switch (this.props.item.type){
            case "1" : LIST = <TYPE_FIRST item={this.props.item}/>;
                break;
            case "2" : LIST =<TYPE_SECOND item={this.props.item}/>;
                break;
            case "3" : LIST = <TYPE_THREE item={this.props.item}/>;
                break;
        }
        return(
            <div>
                {LIST}
            </div>
        )
    }
}
class TYPE_FIRST extends React.Component{
    render(){
        let {item} = this.props;
        return(
            <div>
                <h2>{item.title}</h2>
                <div className="typeFirst">
                    <div>
                        <a href={item.img[0].link} style={{backgroundImage: `url(${item.img[0].src})`}}> </a>
                        <a href={item.img[1].link} style={{backgroundImage: `url(${item.img[1].src})`}}> </a>
                    </div>
                    <div>
                        <a href={item.img[2].link} style={{backgroundImage: `url(${item.img[2].src})`}}> </a>
                        <a href={item.img[3].link} style={{backgroundImage: `url(${item.img[3].src})`}}> </a>
                    </div>
                </div>
            </div>
        )
    }
}
class TYPE_SECOND extends React.Component{
    render(){
        let {item} = this.props;
        return(
            <div>
                <h2>{item.title}</h2>
                <div  className="typeSecond">
                    <div>
                        <a href={item.img[0].link} style={{backgroundImage: `url(${item.img[0].src})`}}> </a>
                        <a href={item.img[1].link} style={{backgroundImage: `url(${item.img[1].src})`}}> </a>
                    </div>
                    <div>
                        <a href={item.img[2].link} style={{backgroundImage: `url(${item.img[2].src})`}}> </a>
                    </div>
                </div>
            </div>
        )
    }
}
class TYPE_THREE extends React.Component{
    render(){
        let {item} = this.props;
        return(
            <div className="three">
                <h2>{item.title}</h2>
                <div  className="typeThree">
                    <div>
                        <a href={item.img[0].link} style={{backgroundImage: `url(${item.img[0].src})`}}> </a>
                    </div>
                    <div>
                        <a href={item.img[1].link} style={{backgroundImage: `url(${item.img[1].src})`}}> </a>
                        <a href={item.img[2].link} style={{backgroundImage: `url(${item.img[2].src})`}}> </a>
                    </div>
                </div>
            </div>
        )
    }
}
ReactMixin.onClass(AdList,Reflux.connect(Store));